// 隔空传递 
// context 隔空传递数据
// 数据嵌套太深  props   
// props 一级一级往里面传递数据    比较麻烦  
// context 隔空传递   this.context 

// redux    
// mobx        运用 context API  
// https://segmentfault.com/a/1190000004636213  

import React, { Component } from 'react';
import { PropTypes } from 'prop-types';

class Contextdemo extends Component {
    state = {
        uword:"2114-越努力越幸运"
    }
    getChildContext(){
        return {
            count:13142114,
            text:this.state.uword + ' daydayup'
        }
    }
    render() {
        console.log(this)
        return (
            <div>
                <h2>Context 隔空传递  </h2>
                <hr/>
                <DemoA uword={this.state.uword}/>
            </div>
        );
    }
}
// 声明组件的context(传给子组件)
Contextdemo.childContextTypes = {
    count:PropTypes.number.isRequired,
    text:PropTypes.string 
}

class DemoA extends Component{
    render(){
        return (
            <div>
                <h2>DemoA - DemoA - DemoA</h2>
                <hr/>
                <DemoB uword={this.props.uword}/>
            </div>
        )
    }
}

class DemoB extends Component{
    render(){
        return (
            <div>
                <h2>DemoB - DemoB - DemoB</h2>
                <h2>text --- {this.context.text} </h2>
                <hr/>
                <DemoC uword={this.props.uword} />
            </div>
        )
    }
}
DemoB.contextTypes={
    text:PropTypes.string 
}

class DemoC extends Component{
    render(){
        return (
            <div>
                <h2>DemoC - DemoC - DemoC</h2>
                <hr/>
                <DemoD uword={this.props.uword}/>
            </div>
        )
    }
}

class DemoD extends Component{
    render(){
        console.log(this)
        return (
            <div>
                <h2>DemoD - DemoD - DemoD</h2>
                <h2>hello world </h2>
                <h3>uword- --- {this.props.uword} </h3>
                <h2>count --- {this.context.count } </h2>
            </div>
        )
    }
}

// 获取需要的context的值得类型
DemoD.contextTypes = {
    count:PropTypes.number 
}

export default Contextdemo;
